<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card shadow="hover" class="mgb20" style="height: 252px">
          <div class="user-info">
            <!-- <img
							src="@/assets/img/img.jpg"
							class="user-avator"
							alt
						> -->
            <img :src="userInfo.headimg" class="user-avator" alt />
            <div class="user-info-cont">
              <div class="user-info-name">
                {{ userInfo.nickName }}
              </div>
              <div>{{position}} /{{number}}号</div>
            </div>
          </div>
            <div class="user-info-list">
            所在城市：
            <span>{{ loginCity }}</span>
          </div>
          <div class="user-info-list">
            所效力的球队：
            <span>{{post}}</span>
          </div>
    
        </el-card>
        <el-card shadow="hover" style="height: 252px">
          <template #header>
            <div class="clearfix">
              <span>生涯命中率</span>
            </div>
          </template>
          投篮
          <el-progress :percentage="50.5" color="#42b983" />三分
          <el-progress :percentage="34.6" color="#f1e05a" />罚球
          <el-progress :percentage="73.5" />
          <!-- <el-progress :percentage="5.9" color="#f56c6c" /> -->
        </el-card>
      </el-col>
      <el-col :span="16">
        <el-row :gutter="20" class="mgb20">
          <el-col :span="8">
            <el-card shadow="hover" :body-style="{ padding: '0px' }">
              <div class="grid-content grid-con-1">
                <el-icon class="grid-con-icon"><Coin /></el-icon>
                <div class="grid-cont-right">
                  <div class="grid-num">{{moeny}}$</div>
                  <div>NBA薪水</div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card shadow="hover" :body-style="{ padding: '0px' }">
              <div class="grid-content grid-con-2">
                <el-icon class="grid-con-icon"><Basketball /></el-icon>
                <div class="grid-cont-right">
                  <div class="grid-num">{{score}}</div>
                  <div>生涯总分数</div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card shadow="hover" :body-style="{ padding: '0px' }">
              <div class="grid-content grid-con-3">
               <el-icon class="grid-con-icon"><Trophy /></el-icon>
               
                <div class="grid-cont-right">
                  <div class="grid-num">{{championsNumber}}</div>
                  <div>总冠军数量</div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <el-card shadow="hover" style="height: 403px">
          <template #header>
            <div class="clearfix">
              <span>待办事项</span>
              <el-button style="float: right; padding: 3px 0" link type="primary">
                添加
              </el-button>
            </div>
          </template>

          <el-table :show-header="false" :data="todoList" style="width: 100%">
            <el-table-column width="40">
              <template #default="scope">
                <el-checkbox v-model="scope.row.status" />
              </template>
            </el-table-column>
            <el-table-column>
              <template #default="scope">
                <div
                  class="todo-item"
                  :class="{
                    'todo-item-del': scope.row.status,
                  }"
                >
                  {{ scope.row.title }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              width="80"
              align="right"
              class-name="table_operate"
            >
              <template #default="scope">
                <i
                  v-if="!scope.row.status"
                  class="el-icon-lx-edit"
                  @click="editRow(scope.$index, todoList)"
                />
                <i
                  class="el-icon-lx-delete"
                  @click="deleteRow(scope.$index, todoList)"
                />
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
    <!-- 编辑弹出框 -->
    <el-dialog v-model="editVisible" title="修改" width="30%">
      <el-input v-model="input" />
      <el-radio-group v-model="radio" class="ml-4">
        <el-radio :label="true" size="large">已完成</el-radio>
        <el-radio :label="false" size="large">未完成</el-radio>
      </el-radio-group>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editVisible = false">取消</el-button>
          <el-button type="primary" @click="submit">确 定</el-button>
        </span>
      </template>
    </el-dialog>
 <el-card  shadow="hover">
 <template #header>
 <div class="header-card">
    <h2 class="header-left">荣誉列表</h2>
    <div class="header-right">
        <el-button :icon="Plus" @click="addContent">添加荣誉</el-button>
    </div>
 </div>
 </template>
    <div class="container">
      <card v-for="item in cardList" :key="item" :dataImage="item.url" >
        <template #header><h1>{{item.title}}</h1></template>
        <template #content>
          <p>{{item.info}}</p>
        </template>
      </card>
    </div>
 </el-card>
      <Dialog
        :isVisible="isVisible"
        :title="optionsTitle"
        @submit="submitList"
        @close="cancel"
        
      >
        <el-form :model="form">
          <el-form-item label="标题：">
            <el-input v-model="form.title" />
          </el-form-item>
          <el-form-item label="内容：">
            <el-input type="textarea" v-model="form.title" ></el-input>
          </el-form-item>
          <el-form-item label="图片：">
               <IConUpload />
          </el-form-item>
        </el-form>
        
    
      </Dialog>
  </div>
</template>

<script setup>
import {Trophy,Coin,Basketball,Plus} from '@element-plus/icons-vue'
import { computed, onMounted, reactive, ref } from "vue";
import card from '../components/Card.vue';
import Dialog from '@/components/Dialog.vue'
import IConUpload from '@/components/IConUpload.vue'

// 添加荣誉表单数据
let form = reactive({
  title:"",
  content:""
})

// 荣誉列表图片数据
const fileList =ref([])

// 控制是否打开修改每日事项栏
const editVisible = ref(false);

// 记录所点击的当前事项的索引值
const curretnIndex = ref(0);

// 添加每日事项内容
const input = ref("");

// 控制是否完成每日事项
const radio = ref("");

//判断是否是修改操作
const isEdit =ref(false)

// 每日事项数据
const todoList = ref([
  {
    title: "今天要做100次卧推",
    status: false,
  },
  {
    title: "投100个三分",
    status: false,
  },
  {
    title: "运球训练2个小时",
    status: false,
  },
  {
    title: "力量训练1小时",
    status: false,
  },
  {
    title: "上篮训练1小时",
    status: true,
  },
 
]);

// 荣誉列表数据
const cardList = [
  {
    url:"https://img1.baidu.com/it/u=2770058708,2809194118&fm=253&fmt=auto&app=120&f=JPEG?w=750&h=500",
    title:"2020年NBA总冠军",
    info:"詹姆斯在2018年转会至洛杉矶湖人队，并在短时间内重建了球队实力。在2019-2020赛季，湖人队取得了出色的表现，最终在总决赛中以4-2击败迈阿密热火队，詹姆斯获得个人第四个NBA总冠军。"
  },
   {
    url:"https://img0.baidu.com/it/u=28263046,28739001&fm=253&fmt=auto&app=138&f=JPEG?w=588&h=391",
    title:"2016年NBA总冠军",
    info:"2014年，詹姆斯回到了他的家乡队克利夫兰骑士。在2015年和2016年连续两个赛季，骑士队都闯入了NBA总决赛，但分别以2-4和3-4输给了金州勇士队。然而，在2016年的总决赛中，詹姆斯带领骑士队以4-3逆转战胜勇士队，帮助球队获得了城市历史上的第一个NBA总冠军。"
  },
   {
    url:"https://img0.baidu.com/it/u=2568772636,2239829056&fm=253&fmt=auto&app=120&f=JPEG?w=640&h=437",
    title:"2013年NBA总冠军",
    info:"2013年，迈阿密热火队再次夺得总冠军。詹姆斯带领球队以4-0和4-3分别战胜密尔沃基雄鹿队和印第安纳步行者队，最终在总决赛中以4-3击败圣安东尼奥马刺队，成功卫冕。"
  },
   {
    url:"https://img1.baidu.com/it/u=288571348,3748833577&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500",
    title:"2012年NBA总冠军",
    info:"詹姆斯在2010年加入了迈阿密热火队，与德怀恩·韦德和克里斯·波什组成了“三巨头”。在2012年，他们以4-1战胜奥兰多魔术队、4-2战胜波士顿凯尔特人队和4-1战胜俄克拉荷马城雷霆队，成功获得詹姆斯职业生涯的第一个总冠军。"
  },

]



// 添加荣誉列表表单是否显示
const isVisible = ref(false)

// 荣誉列表表单标题
const optionsTitle = ref("")

// 个人信息数据
const userInfo = computed(() => {
  return JSON.parse(localStorage.getItem("userInfo"));
});

const {score,moeny,position,loginCity,championsNumber,number,post} = userInfo.value

// 修改代办事项
const editRow = (index, data) => {
  curretnIndex.value = index;
  input.value = data[index].title;
  radio.value = data[index].status;
  editVisible.value = true;
};

// 删除此项代办事宜
const deleteRow = (index, data) => {
  todoList.value.splice(index,1)
}


// 确定修改代办事项
const submit = () => {
  editVisible.value = false;
  todoList.value[curretnIndex.value].title = input.value;
  todoList.value[curretnIndex.value].status = radio.value;
};

// 取消添加荣誉操作
const cancel = () => {
isVisible.value = false
}
// 确定荣誉列表提交操作
const submitList = () => {
  isVisible.value = false
}

// 点击添加荣誉按钮
const addContent = () => {
   isVisible.value = true
}
</script>

<style scoped lang="scss">
.header-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.container {
  padding: 40px 80px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  background: url('https://img1.baidu.com/it/u=1457921247,1985971293&fm=253&fmt=auto&app=138&f=JPG?w=640&h=426');
}
.el-row {
  margin-bottom: 20px;
}

.grid-content {
  display: flex;
  align-items: center;
  height: 100px;
}

.grid-cont-right {
  flex: 1;
  text-align: center;
  font-size: 14px;
  color: #999;
}

.grid-num {
  font-size: 30px;
  font-weight: bold;
}

.grid-con-icon {
  font-size: 50px;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  color: #fff;
}

.grid-con-1 .grid-con-icon {
  background: rgb(45, 140, 240);
}

.grid-con-1 .grid-num {
  color: rgb(45, 140, 240);
}

.grid-con-2 .grid-con-icon {
  background: rgb(100, 213, 114);
}

.grid-con-2 .grid-num {
  color: rgb(45, 140, 240);
}

.grid-con-3 .grid-con-icon {
  background: rgb(242, 94, 67);
}

.grid-con-3 .grid-num {
  color: rgb(242, 94, 67);
}

.user-info {
  display: flex;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 2px solid #ccc;
  margin-bottom: 20px;
}

.user-avator {
  width: 120px;
  height: 120px;
  border-radius: 50%;
}

.user-info-cont {
  padding-left: 50px;
  flex: 1;
  font-size: 14px;
  color: #999;
}

.user-info-cont div:first-child {
  font-size: 30px;
  color: #222;
}

.user-info-list {
  font-size: 14px;
  color: #999;
  line-height: 25px;
  display: flex;
  align-items: center;
  span {
   color: #333;
   font-weight: 700;
  }
}


.mgb20 {
  margin-bottom: 20px;
}

.todo-item {
  font-size: 14px;
}

.todo-item-del {
  text-decoration: line-through;
  color: #999;
}

.schart {
  width: 100%;
  height: 300px;
}
.table_operate {
  display: flex;
  justify-content: space-between;
  align-items: center;
  i {
    margin-left: 10px;
    cursor: pointer;
  }
}
</style>
